<template>
    <div class="content">
        <div class="banner-box-w item-box">
            <div class="item">
                <p>首页</p>
                <h1>HOME</h1>
            </div>
            <div class="item">
                <p>企业简介</p>
                <h1>ABOUT US</h1>
            </div>
            <div class="item">
                <p>招商加盟</p>
                <h1>MERCHANTS</h1>
            </div> 
            <div class="item">
                <p>产品展示</p>
                <h1>PRODUCTS</h1>
            </div>
            <div class="logo">
                <img src="../assets/logo/logo-b.jpg" alt="">
            </div>
            <div class="item">
                <p>新闻中心</p>
                <h1>NEWS</h1>
            </div>
            <div class="item">
                <p>奶品知识</p>
                <h1>KNOWLEDGE</h1>
            </div>
            <div class="item">
                <p>联系我们</p>
                <h1>CONTACT　US</h1>
            </div>
            <div class="item end">
                <p class="tel1">招商加盟热线</p>
                <h1 class="tel2">{{ webMessage.tel1 }}</h1>
            </div>
        </div>
    </div>
</template>

<script setup>
import router from '@/router/index.js'
import { getTopList, getWebXinxi } from '@/api/viewapi.js'
import { ref, reactive, onMounted } from 'vue'


const webMessage = ref({})

const topList = ref([])

const gotoweb = (path) => {
    router.push(path)
}

const getWebMessage = () => {
    getWebXinxi().then((res) => {
        webMessage.value = res.data.data
        console.log(res);
    })
}

const _getTopList = () => {
    getTopList().then((res) => {
        topList.value = res.data.toplist_ids
        console.log(res);
    })
}

// 跳转商品列表 
const gotoChanpin = (id) => {
    router.push({ path: '/chanpinlist', query: { id: id } })
}

onMounted(() => {
    getWebMessage()
    _getTopList()
})
</script>

<style scoped lang="scss">
.content {
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 9999;
    background-color: white;
}

// 显示pc端
@media (min-width: 800px) {
    img {
         width: 160px;
    }
    .content {

        padding: 6px 0;
        .item-box {
            display: flex;
            justify-content: space-between;
            .item {
                padding: 20px 0;
                cursor: pointer;
                p {
                    text-align: center;
                    font-size: 20px;

                }
                h1 {
                    text-align: center;
                    font-size: 12px;
                }
            }
            .item:hover {
                color: red;
            }
            .end {
                color: red;
                .tel2 {
                    font-size: 20px;
                }
                .tel1 {
                    font-size: 14px;

                }
            }
        }
    }
}

// 取消显示pc端 显示手机端
@media screen and (max-width: 799px) {}
</style>
